<script setup lang="ts">
import { onMounted } from 'vue'
import { addSubmit, getMealList, getShopList } from '@/api/unit/index'

const shopList = ref([])
const selectKey = ref(0)
const mealList = ref([])
const form = ref({})

// 商品列表
async function getList() {
  uni.showLoading({ title: '加载中' })
  const res = await getShopList()
  uni.hideLoading()
  if (res.code === 200) {
    if (res.data && res.data.length != 0) {
      res.data.forEach((item) => {
        item.number = 0
      })
    }
    shopList.value = res.data
  }
}

// 套餐列表
async function getPack() {
  uni.showLoading({ title: '加载中' })
  const res = await getMealList()
  uni.hideLoading()
  if (res.code === 200)
    mealList.value = res.data
}

// 图片预览
function previewImage(url) {
  uni.previewImage({
    current: 0,
    urls: [url],
  })
}

// 添加
function handleAdd(index) {
  if (shopList.value[index].number < 200)
    shopList.value[index].number++
  else uni.showToast({ title: '数量不能超过200', icon: 'none' })
}

// 减少
function handleDown(index) {
  if (shopList.value[index].number > 0)
    shopList.value[index].number--
}

// 切换tab
function handleTab(type) {
  selectKey.value = type

  if (type === 0)
    getList()
  else getPack()
}

function testMobile(value) {
  return /^1([3589]\d|4[5-9]|6[1-2,4-7]|7[0-8])\d{8}$/.test(value)
}

// 提交数据
async function handleSubmit() {
  if (!form.value.mobile) {
    uni.showToast({ title: '请输入您的联系方式', icon: 'none' })
    return
  }
  else {
    if (!testMobile(form.value.mobile)) {
      uni.showToast({
        title: '格式错误，请输入正确的手机号',
        icon: 'none',
      })
      return
    }
  }

  if (getParam() === false) {
    uni.showToast({
      title: '请输入您需要订购的数量',
      icon: 'none',
    })
    return
  }
  const res = await addSubmit({
    mobile: form.value.mobile,
    boList: getParam(),
  })
  if (res.code !== 200)
    return

  uni.showToast({
    title: '提交成功',
    icon: 'success',
    mask: true,
  })

  setTimeout(() => {
    form.value.mobile = undefined
    getList()
  }, 2000)
}

// 校验数量
function getParam() {
  const arr = []
  shopList.value.forEach((item) => {
    arr.push({
      proId: item.proId,
      number: item.number,
    })
  })

  const found = arr.find(item => item.number > 0)
  if (found === undefined)
    return false
  else return arr
}

onMounted(() => {
  getList()
  getPack()
})
</script>

<template>
  <view class="relative h-100vh" style="background-color: #fff">
    <view class="s_title">
      2024新春大吉，物价查询
    </view>
    <view class="shop_list">
      <view class="top_tab">
        <view :class="selectKey === 0 ? 'activeTab' : ''" @click="handleTab(0)">
          单个商品
        </view>
        <view :class="selectKey === 1 ? 'activeTab' : ''" @click="handleTab(1)">
          商品套餐
        </view>
      </view>
      <view v-if="selectKey === 0">
        <view class="t_mobile">
          <span> 联系方式：</span>
          <input
            v-model="form.mobile"
            class="number-input"
            type="number"
            :maxlength="11"
            placeholder-style="color:#999"
            placeholder="请输入联系方式"
          >
        </view>
        <ul class="shop_ul">
          <li v-for="(item, index) in shopList" :key="index">
            <view class="s_img">
              <image
                :src="item.picUrl"
                class="h-120rpx w-120rpx"
                @click="previewImage(item.picUrl)"
              />
            </view>
            <view class="s_name">
              <view>
                {{ item.name }}
                <span style="color: red">￥{{ item.price }}元</span>
              </view>
              <view>{{ item.spe }}</view>
            </view>
            <view class="s_num">
              <image
                src="@/static/images/static/down.png"
                class="down_img h-40rpx w-40rpx"
                @click="handleDown(index)"
              />
              <input
                v-model="item.number"
                style="text-align: center"
                class="number-input"
                type="number"
                :min="0"
                placeholder-style="color:#999"
                placeholder="请输入数量"
              >
              <image
                src="@/static/images/static/add.png"
                class="add_img h-40rpx w-40rpx"
                @click="handleAdd(index)"
              />
            </view>
          </li>
        </ul>
      </view>
      <view v-if="selectKey === 1">
        <ul class="meal_ul">
          <template v-if="mealList.length != 0">
            <li v-for="(item, index) in mealList" :key="index">
              <view class="m_top">
                <view>
                  套餐{{ index + 1 }}：{{ item.title }}
                  <span>￥{{ item.allMoney }}元</span>
                </view>
              </view>
              <view class="m_down">
                <ul>
                  <li v-for="(child, ind) in item.infoList" :key="ind">
                    <span v-if="ind === 0">
                      {{ child.name }}*{{ child.number }}
                    </span>
                    <span v-if="ind > 0">
                      <span class="ml10 mr10">+</span>
                      {{ child.name }}*{{ child.number }}
                    </span>
                  </li>
                </ul>
              </view>
            </li>
          </template>
          <template v-else>
            <li style="padding: 60% 0; text-align: center">
              暂无数据
            </li>
          </template>
        </ul>
      </view>

      <view class="bottom_btn">
        <view v-if="selectKey === 0" class="submit_btn" @click="handleSubmit">
          立即提交
        </view>
        <view v-if="selectKey === 1" class="text_btn">
          套餐仅供参考，如有需要请向相关人员说明
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.s_title {
  width: 100%;
  height: auto;
  text-align: center;
  font-size: 40rpx;
  padding: 30rpx;
  font-weight: bold;
  background-color: red;
  color: #fff;
  margin-bottom: 40rpx;
}

.top_tab {
  width: 100%;
  height: auto;
  padding-left: 20rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
}
.top_tab view {
  width: 180rpx;
  height: 60rpx;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-right: 20rpx;
  background: rgba($color: red, $alpha: 0.4);
  border-radius: 8rpx;
  font-size: 28rpx;
}
.shop_list {
}
.shop_list .shop_ul,
.shop_list .meal_ul {
  padding: 0;
  margin: 0;
  width: 100%;
}

// 商品ul
.shop_list .shop_ul {
  height: auto;
  max-height: calc(100vh - 460rpx);
  overflow: auto;
}

// 套餐
.meal_ul {
  height: auto;
  max-height: calc(100vh - 370rpx);
  overflow: auto;
}

.shop_list .shop_ul li {
  width: 100%;
  height: auto;
  list-style: none;
  overflow: hidden;
  padding: 20rpx 30rpx 20rpx 20rpx;
  border-bottom: 1rpx dashed #ddd;
  box-sizing: border-box;
}
.shop_list .shop_ul li:first-child {
  border-top: 1px dashed #ddd;
}

// 套餐ul
.shop_list .meal_ul > li {
  width: 100%;
  height: auto;
  list-style: none;
  overflow: hidden;
  padding: 12rpx;
  border-bottom: 1rpx dashed #ddd;
  box-sizing: border-box;
  font-size: 32rpx;
}
.shop_list .meal_ul > li:first-child {
  border-top: 1px dashed #ddd;
}

.s_img {
  width: 120rpx;
  height: 120rpx;
  float: left;
  margin-right: 20rpx;
}
.s_name {
  width: 300rpx;
  float: left;
  margin-right: 10rpx;
}
.s_name > view:first-child {
  color: #333;
  margin-bottom: 6rpx;
  font-size: 32rpx;
}
.s_name > view:last-child {
  color: #525252;
  font-size: 28rpx;
}

.s_num {
  width: calc(100% - 460rpx);
  float: right;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25rpx;
}
.s_num image {
  width: 40rpx;
  height: 40rpx;
}
.number-input {
  width: calc(100% - 140rpx);
  height: 60rpx;
  float: left;
  border: 1px solid #ddd;
  font-size: 30rpx;
  margin: 0 20rpx;
  border-radius: 16rpx;
  padding: 0 16rpx;
}

.activeTab {
  background: red !important;
}

.m_top {
  width: 100%;
  height: auto;
  font-size: 32rpx;
}
.m_top > view:first-child {
  margin-bottom: 10rpx;
  font-weight: bold;
}
.m_top > view:first-child span {
  color: red;
  margin-left: 20rpx;
}
.m_down {
  width: 100%;
  height: auto;
  margin-top: 20rpx;
  padding-left: 60rpx;
}
.m_down ul {
  overflow: auto;
  padding: 0;
  margin: 0;
}
.m_down ul li {
  width: auto;
  float: left;
  font-size: 30rpx;
  color: #000;
  margin-bottom: 13rpx;
  list-style: none;
}

.ml10 {
  margin-left: 10rpx;
}

.mr10 {
  margin-right: 10rpx;
}

.t_mobile {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin: 30rpx;
  display: flex;
  align-items: center;
}
.t_mobile span {
  float: left;
  font-size: 28rpx;
  font-weight: bold;
}
.t_mobile .number-input {
  width: calc(100% - 300rpx);
}

.bottom_btn {
  width: 100%;
  height: 100rpx;
  background: red;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: bold;
}

.submit_btn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text_btn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
